<template>
  <div class="index">
    <leftbar title="CBNDSK/Aasah ashdjk jdkd" :left="true">
    <template #right>
      <van-icon name="plus" />
    </template>
  </leftbar>
    <div class="index-header">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value" :options="option"></van-dropdown-item>
      </van-dropdown-menu>
      <div class="row" style="border-bottom: 1px solid #888">
        <div class="row-item" style="border: none">
          <b>-0.1</b>
          <b>-0.01</b>
        </div>
        <span>0.9</span>
        <div class="row-item" style="border: none">
          <b>+0.1</b>
          <b>+0.01</b>
        </div>
      </div>
      <div class="row" >
        <div class="row-item">
          <b @click="handleSL(1)">-</b>
          <span>{{ SL }}</span>
          <b @click="handleSL(2)">+</b>
        </div>
        <div class="row-item">
          <b @click="handleTP(1)">-</b>
          <span>{{ TP }}</span>
          <b @click="handleTP(2)">+</b>
        </div>
      </div>
      <div>
        <van-dropdown-menu class="custom-dropdown">
          <van-dropdown-item v-model="value1" title-class="dropdown-item" :options="[{ text: '全部或取消' }]">
            <template #title>
              <div class="instructions">
                <span style="color: #000 !important">成交指令</span>
                <span>全部或取消</span>
              </div>
            </template>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>
    <div class="index-content">
      <div class="each-row" v-for="(item, index) in contentEach" :key="index" :style="{ bottom: bottomValue(index) + 'px' }">
        <div class="line"></div>
        <div class="value">{{ item }}</div>
      </div>

      <div v-show="SL !== 'SL'" class="SL-line" :style="{ bottom: SLBottom + 'px' }">
        <div class="line"></div>
        <div class="value">{{ SL }}</div>
      </div>
      <div v-show="TP !== 'TP'" class="TP-line" :style="{ bottom: TPBottom + 'px' }">
        <div class="text">TP</div>
        <div class="line"></div>
        <div class="value">{{ TP }}</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="tips">注意：市价交易模式下的实际成交价格，可能会和请求价格有一定差异！</div>
      <div class="btns">
        <div class="btn"><span>SELL</span><br /><span>通过市场</span></div>
        <div class="btn"><span>BUY</span><br /><span>通过市场</span></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import leftbar from '@/components/leftbar'
const SL = ref('SL')
const TP = ref('TP')
const TPBottom = ref(0)
const SLBottom = ref(0)

const value = ref('a')
const option = [
  { text: '市场执行', value: 'a' },
  { text: '买入限价', value: 'b' },
  { text: '卖出现价', value: 'c' }
]

const navObjVal = ref({})
const navOption = ref([
  { text: 'AUNJPN', value: 1 },
  { text: 'BTCADDFFGS', value: 2 },
  { text: 'BTC', value: 3 },
  { text: 'BTC', value: 4 },
  { text: 'BTC', value: 5 },
  { text: 'BTC', value: 6 }
])
const showPopover = ref(false)

const contentEach = ['0.97790', '0.97785', '0.97780', '0.97775', '0.97770', '0.97765', '0.97760', '0.97755', '0.97750', '0.97746']

const bottomValue = (index) => {
  return 350 - (350 / (contentEach.length - 1)) * index
}

const handleTP = (type) => {
  if (TP.value === 'TP') {
    const value = contentEach[contentEach.length - 1]
    TP.value = type !== 1 ? Number(value) + 0.00001 : Number(value) - 0.00001
  } else {
    TP.value = type !== 1 ? (Number(TP.value) + 0.00001).toFixed(5) : (Number(TP.value) - 0.00001).toFixed(5)
  }

  TPBottom.value = type !== 1 ? TPBottom.value + bottomValue(8) / 5 : TPBottom.value - bottomValue(8) / 5
}

const handleSL = (type) => {
  if (SL.value === 'SL') {
    const value = contentEach[contentEach.length - 1]
    SL.value = type !== 1 ? Number(value) + 0.00001 : Number(value) - 0.00001
  } else {
    SL.value = type !== 1 ? (Number(SL.value) + 0.00001).toFixed(5) : (Number(SL.value) - 0.00001).toFixed(5)
  }

  SLBottom.value = type !== 1 ? SLBottom.value + bottomValue(8) / 5 : SLBottom.value - bottomValue(8) / 5
}

const handleNavSelect = (value) => {
  navObjVal.value = value
  showPopover.value = false
}

onMounted(() => {
  navObjVal.value = navOption.value[0]
})
</script>
<style lang="scss" scoped>
@import url('./index.scss');
</style>
